<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        .c1 {
            color: green;
        }

        .c2 {
            font-size: 30px;
        }
    </style>
</head>
<body>
<!--
      如何实现标签属性的动态操作
      v-bind:  绑定标签属性  实现属性的动态操作
      v-bind:属性名 =""   简化   v-bind:class=""     :class=""
-->
<div id="app">

    <p  v-bind:class="css3">vue 实现css样式的操作</p>
    <button @click="addCSS1">add css1</button>
    <button @click="addCSS2">add css2</button>

    <p  v-bind:class="['c1','c2']">vue 实现css样式的操作</p>
    <p  v-bind:class="{c1:addCS1,c2:addCS2}">vue 实现css样式的操作</p>

</div>

<script !src="">

    let vm = new Vue({
        el: '#app',
        data: {
            css1:'c1',
            css2:['c2','c1'],
            css3:{
               c1:false,
               c2:false
            },
            addCS1:true,
            addCS2:false
        },
        methods: {
            addCSS1(){
                this.css3.c1=true
            },
            addCSS2(){
                this.css3.c2=true
            }
        }
    })
</script>
</body>
</html>